<template>
  <div class="equipmentQuantity" id="main"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "equipmentQuantity",
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    if (this.list.length > 0) {
      this.updateChart();
    }
  },
  methods: {
    updateChart() {
      // 排序
      const list = this.list;
      list.sort((a, b) => b.quantity - a.quantity);
      const orders = list.map((val, index) => index + 1);
      const datas = list.map(item => item.quantity);

      const dom = document.querySelector("#main");
      const myEcharts = echarts.init(dom, "dark");

      const options = {
        title: {
          text: "各省市设备分布数量",
          x: "center",
          y: "top",
          textAlign: "left",
          top: 10,
          textStyle: {
            fontSize: 15
          }
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter(p) {
            const index = p.dataIndex;
            const value = p.value;
            return list[index].area + ":" + value;
          }
        },
        legend: {
          show: false
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: "category",
          data: orders,
          inverse: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#a95a36",
              fontSize: "72%"
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        backgroundColor: "transparent",
        series: [
          {
            label: {
              show: true,
              position: [320, 0],
              color: "#44699d"
            },
            showBackground: true,
            backgroundStyle: {
              color: "#0c1941"
            },
            name: "数量",
            type: "bar",
            data: datas,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "#f97f05"
                  },
                  {
                    offset: 1,
                    color: "#29c766"
                  }
                ])
              }
            }
          }
        ]
      };
      myEcharts.setOption(options);
    }
  }
};
</script>

<style lang="less" scoped>
.equipmentQuantity {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 56.25vh;
}
</style>
